<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:fragment="head">
	<base th:href="@{/}">
	<meta charset="utf-8">
	<title>新增</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
	<script type="text/javascript" src="static/layui/layui.js"></script>
	<script type="text/javascript" src="static/plugin/jquery/jquery-1.4.4.min.js"></script>
</head>
<body>
<div class="layui-fluid">
	<div class="layui-card">
		<!-- 内容区 -->
		<div class="layui-card-body">
			<form class="layui-form" id="form" action="" >
				<div class="layui-card-header">结算信息</div>
				<div class="layui-form-item" style="margin-top: 20px;">
					<div class="layui-inline">
						<label class="layui-form-label"><span style="color: red">*</span>结算数量</label>
						<div class="layui-input-inline">
							<input name="qty" type="number" id="qty" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label"><span style="color: red">*</span>结算时间</label>
						<div class="layui-input-inline">
							<input type="text" name="settleTime" id="settleTime" lay-verify="required|date"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input mydate">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label"><span style="color: red">*</span>折扣率</label>
						<div class="layui-input-group">
							<input id="settleRate" name="settleRate" type="number" class="layui-input" value="100" min="1" max="100" lay-verify="required">
							<div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
								%
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item" style="margin-top: 20px;">
					<div class="layui-inline">
						<label class="layui-form-label">客户外采人员</label>
						<div class="layui-input-inline">
							<input id="purchasePerson" name="purchasePerson" type="text" class="layui-input" >
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">产品实际交付日期</label>
						<div class="layui-input-inline">
							<input type="text" id="paymentDate" name="paymentDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input mydate">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">交付数量</label>
						<div class="layui-input-group">
							<input id="paymentQty" name="paymentQty" type="number" class="layui-input" >
						</div>
					</div>
				</div>
				<div class="layui-form-item" style="margin-top: 20px;">
					<div class="layui-inline">
						<label class="layui-form-label">在制数量</label>
						<div class="layui-input-inline">
							<input id="productingQty" name="productingQty" type="number" class="layui-input" >
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">是否对账</label>
						<div class="layui-input-inline">
							<input type="checkbox" id="account" name="account" lay-skin="switch" lay-filter="switchTest" title="是|否">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">发货日期</label>
						<div class="layui-input-group">
							<input type="text" id="dispatchDate" name="dispatchDate" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input mydate">
						</div>
					</div>
				</div>
				<div class="layui-form-item" style="margin-top: 20px;">
					<div class="layui-inline">
						<label class="layui-form-label">发货数量</label>
						<div class="layui-input-inline">
							<input id="dispatchQty" name="dispatchQty" type="number" class="layui-input" >
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">合格数量</label>
						<div class="layui-input-inline">
							<input id="qualityQty" name="qualityQty" type="number" class="layui-input" >
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">不合格数量</label>
						<div class="layui-input-inline">
							<input id="unqualityQty" name="unqualityQty" type="number" class="layui-input" >
						</div>
					</div>
				</div>
				<div class="layui-col-md12">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<textarea id="memo" name="memo" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-col-md12">
					<label class="layui-form-label">特殊备注</label>
					<div class="layui-input-block">
						<textarea id="specialMemo" name="specialMemo" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item" style="margin-top: 20px;">
					<div class="layui-inline">
						<label class="layui-form-label"></label>
						<button type="submit" class="layui-btn" style="display: none" id="submit" lay-submit lay-filter="demo1">立即提交</button>
<!--						<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
					</div>
				</div>
			</form>
			<div class="layui-card-header">结算工序信息</div>
			<table id="processTable" class="layui-table" lay-filter="processTable"></table>
		</div>
	</div>
	<script type="text/javascript" src="/static/layui/module/tableSelect.js"></script>
	<script type="text/javascript" th:inline="javascript">
		let parentIndex = parent.layer.getFrameIndex(window.name); // 获取窗口索引
		layui.use(['layer','jquery','table','element','form','laydate','tableSelect','util'],function(){
			let layer = layui.layer,
					table = layui.table,
					form = layui.form,
					laydate = layui.laydate,
					$ = layui.jquery,
					tableSelect = layui.tableSelect,
					util = layui.util,
					element = layui.element;

			let dateString = util.toDateString(new Date(), 'yyyy-MM-dd')

			laydate.render({
				elem: '.mydate',
				value: dateString,
				isInitValue: true,
				showBottom: false
			});

			let tableData = localStorage.getItem("settleData");
			tableData = JSON.parse(tableData);
			tableData.account = false

			form.on('submit(demo1)', function(data){
				let field = data.field; // 获取表单字段值
				field.account = field.account === 'on';
				let fieldNew = {...tableData,...field};

				let datas = table.cache['processTable'];

				$.each(datas,function (i,d) {
					delete d.id
				});

				tableData.detailList = datas;
				tableData.mark = false;

				if(tableData.czjslx !== '按批次') {
					// 询问是否更新价格工序表
					top.layer.confirm('是否更新价格工序表?', {icon: 3, title: '提示'}, function (index) {
						tableData.mark = true;
						top.layer.close(index);
						saveData(fieldNew)
					}, function (index) {
						top.layer.close(index);
						saveData(fieldNew)
					});
				}else {
					saveData(fieldNew)
				}

				return false; // 阻止默认 form 跳转
			});

			function saveData(d) {

				if(d.czjslx === '按批次') {
					layer.prompt({title: '价格'}, function(value, index, elem){
						// 值的校验
						if(value.replace(/\s/g, '') === ''){
							layer.tips('值不能为空', elem, {tips: 1});
							return elem.focus();
						}

						//判断是否为数字
						if(value.replace(/^(0|([1-9][0-9]*))(\.[\d]+)?$/) === value){
							layer.tips('只能是数字', elem, {tips: 1});
							return elem.focus();
						}
						d.amount = value;

						savePost(d)
						layer.close(index);
					});
				}else {
					savePost(d)
				}

			}

			function savePost(da){
				let itm = top.layer.load(0, { shade: 0.3 });
				$.post('manage/sale_order/order_settle',{
					settleData: JSON.stringify(da)
				},function (d){
					top.layer.close(itm);
					if(d.code == "200"){
						layer.msg("结算成功",{icon: '1'},function () {
							top.layer.close(parentIndex);
						});
					}else{
						layer.alert("结算失败，"+d.msg,{icon: '2'});
					}
				})
			}

			table.render({
				elem:'#processTable'
				,url:'manage/sale_order/process_info_new'
				,where:{detailsId:tableData.saleOrderDetailId}
				,page: true //开启分页
				,limit: 10
				,limits: [10,15,20,30,40,50,100]
				,loading: true
				,cols: [
					[ //表头
						{field: 'serialNumber', title: '序列号', minWidth:'150'}
						,{field: 'orderProcess', title: '订单工序', minWidth:'150'}
						,{field: 'orderProcessName', title: '工序名称', minWidth:'150'}
						,{field: 'sblx', title: '设备类型', minWidth:'90'}
						// ,{field: 'pricingMethod', title: '计价方式', minWidth:'150'}
						,{field: 'expectHours', title: '结算标准工时', minWidth:'150',edit:true}
						,{field: 'ioritaxcost', title: '结算价格', minWidth:'90',edit:true}
						,{field: 'amount', title: '结算金额', minWidth:'90'}
						// ,{fixed: 'right', title: '操作',toolbar: '#barRight'}
					]
				]
				,text: {
					none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
				}
				,data: []
			});

			// 单元格编辑事件
			table.on('edit(processTable)', function(obj){

				var field = obj.field; // 得到修改的字段
				var value = obj.value // 得到修改后的值
				var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增

				if(tableData.czjslx.includes('时间')) {
					// 值的校验
					if(value.replace(/\s/g, '') === ''){
						layer.tips('值不能为空', this, {tips: 1});
						value = Number(oldValue);
						return obj.reedit(); // 重新编辑 -- v2.8.0 新增
					}

					//判断是否为数字
					if(value.replace(/^(0|([1-9][0-9]*))(\.[\d]+)?$/) === value){
						value = Number(oldValue);
						layer.tips('只能是数字', this, {tips: 1});
						return obj.reedit(); // 重新编辑 -- v2.8.0 新增
					}
				}else {
					if (field === 'ioritaxcost'){
						// 值的校验
						if(value.replace(/\s/g, '') === ''){
							layer.tips('值不能为空', this, {tips: 1});
							value = Number(oldValue);
							return obj.reedit(); // 重新编辑 -- v2.8.0 新增
						}

						//判断是否为数字
						if(value.replace(/^(0|([1-9][0-9]*))(\.[\d]+)?$/) === value){
							value = Number(oldValue);
							layer.tips('只能是数字', this, {tips: 1});
							return obj.reedit(); // 重新编辑 -- v2.8.0 新增
						}
					}
				}

				// 更新当前缓存数据
				var update = {};
				update[field] = value;
				obj.update(update, true); // 参数 true 为 v2.7 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
			});

		})

		function fromData() {
			$('#submit').click();
		}
	</script>
</div>
</body>
</html>